<template>
  <el-container style="height: 100%">
    <el-main>
      <el-form
        ref="form"
        :inline-message="false"
        :status-icon="true"
        :model="formData"
        label-width="120px"
        size="large"
        :hide-required-asterisk="true"
        class="ser-form ope-form"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="资源名称：">
              <div class="expand-val">
                <span>{{ formData.resourceName}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="数据库类型：">
              <div class="expand-val">
                <span>{{ formData.versionTypeName}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="资源访问方式：">
              <div class="expand-val">
                <span>{{formData.resourceAccess+''|DictionaryCodeToName('resourceAccess')}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="URL：">
              <div class="expand-val">
                <span>{{formData.resourceUrl||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="IP地址：">
              <div class="expand-val">
                <span>{{ formData.ip||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="端口：">
              <div class="expand-val">
                <span>{{ formData.port||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="数据库名：">
              <div class="expand-val">
                <span>{{ formData.dbName||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户名：" prop="username">
              <div class="expand-val">
                <span>{{ formData.username}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="编码：" prop="unicodeId">
              <div class="expand-val">
                <span>{{ formData.unicodeId|DictionaryCodeToName('unicode')}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row v-show="false">
          <el-col>
            <el-form-item label="连接方式：" prop="connectionMode">
              <div class="expand-val">
                <span>{{ formData.connectionMode+''|DictionaryCodeToName('connectionMode')}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="联系人：" prop="manager">
              <div class="expand-val">
                <span>{{ formData.manager||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="联系方式：" prop="phone">
              <div class="expand-val">
                <span>{{ formData.phone||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="备注：" label-width="120px" class="remark">
              <div class="expand-val">
                <span>{{ formData.remark||'-'}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-button size="medium" @click="onBack()">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div style="height: 60px"></div>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: "databasedetail",
  data() {
    return {
      formData: {
        resourceName: "",
        ip: "",
        port: "",
        resourceUrl: "",
        dbName: "",
        username: "",
        password: "",
        connectionMode: "", // 连接方式
        fileDir: "",
        typeId: "",
        activeAndPassiveMode: "",
        remark: "",
        unicodeId: "", // 编码格式
        resourceAccess: 0, // 资源访问方式
        dbDriverId: "",
        versionTypeName: "", // 数据库版本名称
        manager: "",
        phone: ""
      },
      saveLoading: false,
      testLoading: false,
      loading: false
    };
  },
  props: {
    params: {
      type: Object
    }
  },
  methods: {
    // 返回
    onBack() {
      this.$emit("changeComponent", {
        active: "databaseresource"
      });
    },
    loadData() {
      if (this.params) {
        this.$api.resourcemanage.getDbById
          .call(this, this.params.id)
          .then(res => {
            if (res.data.code === 200) {
              for (let key in res.data.data) {
                if (this.formData.hasOwnProperty(key)) {
                  this.formData[key] = res.data.data[key];
                }
              }
            }
          })
          .catch(e => {});
        console.log("6666666666666", this.formData);
      }
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.loadData();
    });
  }
};
</script>
<style  scoped>
</style>
